<template>
    <div>
        <ul>
            <li v-for="item in props.todoarray" :key="item.id">
                {{item.id}} . {{item.text}} 
                <button @click="changeDone(item)">{{item.done?"已完成":"未完成"}}</button>
                <button @click="clickme">click</button>
            </li>
        </ul>
    </div>
</template>

<script setup lang="ts">
import {ToDoArr,ToDo} from '../Impl/TodoImpl'
import {withDefaults} from 'vue'
interface TodoListProps{
    todoarray:ToDoArr,
    a:string,
    n:number
}
//用泛型来声明props
// let props=defineProps<TodoListProps>();
let props=withDefaults(defineProps<TodoListProps>(),{
    todoarray:()=>[] //用withDefaults函数来声明里面默认值
});
let changeDone=(item:ToDo)=>{
    // item.done='hello';//Error数据验证
    item.done=!item.done;
}
let clickme=(e:Event)=>{//原生事件对象类型 是Event
    console.log('e===>',e);
}
//没有ts的写法
// let props2=defineProps({
//     n:{
//         type:Number, //类型
//         default:0//默认值
//     },
//     todoarray:{
//         type:Array,
//         default:()=>[]
//     }
// })
</script>

<style scoped>

</style>